// 顶部导航菜单
<template>
  <div class="nav-agent">
    <el-row class="nav-logo">
      <el-col :span="4" class="nav-title">
        V8
      </el-col>

      <el-col :span="16" class="nav-content">
        <el-row>
          <button v-for="(item,index) in userMenus" :key="`headerMenusTabs${index}`" @click="handleTabClick(item)"
                  :class="currPage===item.path ? 'is-selected-button':''" class="nav-content-button">
            {{item.name}}
          </button>
          <button @click="handleTabClick({path:'logout'})" class="nav-content-button">
            退出
          </button>
        </el-row>
        <!--<el-tabs class="nav-tab" type="card" v-model="tabName" @tab-click="handleTabClick">-->
          <!--<el-tab-pane v-for="(item,index) in userMenus" :key="`headerMenusTabs${index}`" :label="item.name"-->
                       <!--:name="item.path">-->
            <!--<template v-if="item.children">-->
              <!--<el-row :gutter="0" class="nav-bread">-->
                <!--<el-col :span="22" :offset="2">-->
                  <!--<el-tabs class="nav-tab-child" type="card" v-model="tabNameChild" @tab-click="handleTabChildClick">-->
                    <!--<el-tab-pane v-for="(child,indexChild) in item.children" :key="`headerMenusTabsChild${indexChild}`"-->
                                 <!--:label="child.name" :name="child.path">-->
                    <!--</el-tab-pane>-->
                  <!--</el-tabs>-->
                <!--</el-col>-->
              <!--</el-row>-->
            <!--</template>-->
          <!--</el-tab-pane>-->
          <!--<el-tab-pane label="退出" name="logout"></el-tab-pane>-->
        <!--</el-tabs>-->
      </el-col>

      <el-col :span="1" class="nav-info_img">
        <img src="../../../../static/agent/img/ico_user.png"/>
      </el-col>
      <el-col :span="4" class="nav-info">
        <el-col v-for="(item,index) in onlineInfo" :key="index">
          {{item.label}} : {{item.value}}
        </el-col>
      </el-col>
    </el-row>

    <!--二级菜单-->
    <el-row v-if="subCurrPage" class="subCurrPage">
      <ul class="subCurrPage-left">
        <span>当前选中:</span>
        <span style="color:#eb6100">{{showNowPage}}</span>
        <img src="../../../../static/agent/img/ico_arrow.png"/>
      </ul>
      <ul class="subCurrPage-right">
        <button v-for="(item, index) in subCurrPage " :class="tabNameChild===item.path?'isSelectedBtn':''" :key="index" @click="handleTabChildClick(item.path)">
          {{item.name}}
        </button>
      </ul>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'NavHeader',
    data() {
      return {
        tabName: null,
        tabNameChild: null,
        nowPage: '',
        subPage: '',
        showNowPage: '',
        onlineInfo: [], // 右上角在线用户数据
      }
    },
    components: {},
    computed: {
      ...mapGetters([
        'menus',
        'nowSelectedGame',
        'realtimePt',
      ]),
      // 根据用户可访问的菜单,生成菜单
      userMenus() {
        const userMenus = {}
        const menusMap = {}
        // 从router 筛选出导航菜单
        this.$router.options.routes.map(item => {
          if (item.index && item.children.length === 1) {
            menusMap[item.index] = {}
            menusMap[item.index]['name'] = item.meta.title
            menusMap[item.index]['path'] = `${item.path}`
            menusMap[item.index]['icon'] = item.children[0].meta.icon
          } else if (item.index && item.children.length > 1) {
            menusMap[item.index] = {}
            menusMap[item.index]['name'] = item.meta.title
            menusMap[item.index]['path'] = item.path
            menusMap[item.index]['icon'] = item.meta.icon
            menusMap[item.index]['children'] = []
            item.children.map(child => {
              if (!child.hidden) {
                // 不隐藏的菜单
                const newChild = {}
                newChild['name'] = child.meta.title
                newChild['path'] = `${item.path}/${child.path}`
                newChild['icon'] = child.meta.icon
                menusMap[item.index]['children'].push(newChild)
              }
            })
          }
        })
        console.log(' this.$router.options.routes.map', this.$router.options)
        console.log('menusMap里面有什么,r 筛选出的导航菜单', menusMap)
        // 根据服务器的menus筛选可访问的菜单
        if (this.menus && this.menus.available_menu_list) {
          for (const index in this.menus.available_menu_list) {
            if (this.menus.available_menu_list.hasOwnProperty(index)) {
              for (const key in menusMap) {
                if (menusMap[key].name === index) {
                  const item = menusMap[key]
                  userMenus[index] = item
                }
              }
            }
          }
        }
        console.log('userMenus', userMenus)
        return userMenus
      },
      currPage: {
        get() {
          if (!this.nowPage) {
            const path = this.$router.history.current.fullPath.split('/')[1]
            console.log('路由历史', this.$router)
            return '/' + path
          }
          return this.nowPage
        },
        set(newValue) {
          this.nowPage = newValue
        },
      },
      subCurrPage: {
        get() {
          return this.subPage
        },
        set(newValue) {
          this.subPage = newValue
        },
      },
    },
    async created() {
      await this.$store.dispatch('FetchMenus', {})
      // 从路由获取导航信息
      this.tabName = this.$router.history.current.matched[0].path // 从path中获取
      this.tabNameChild = this.$router.history.current.path // 从path中获取
      this.getOnlineStat()
      console.log('this.tabName导航信息', this.tabName)
    },
    methods: {
      getOnlineStat() {
        this.$store.dispatch('OnlineStat')
          .then(response => {
            this.onlineInfo = []
            for (const key in response) {
              if (key !== 'message') {
                const temp = {
                  label: key,
                  value: response[key],
                }
                this.onlineInfo.push(temp)
              }
            }
          })
      },
      handleTabClick(args) {
        this.showNowPage = args.name
        const path = args.path
        // this.tabNameChild = this.tabName // 子菜单显示父级的链接
        if (path === 'logout') {
          this.logout()
        } else {
          // setCookie
          // this.$store.dispatch('SetCookie', ['tabName', path])
          this.$router.push(path)
        }
        this.currPage = path
        this.subCurrPage = args.children
        // console.log('路由信息', this.$router.history.current.fullPath.split('/')[1])
      },

      handleTabChildClick(args) {
        const path = args
        // this.$store.dispatch('SetCookie', ['tabNameChild', path])
        this.$router.push(path)
      },

      logout() {
        this.$store.dispatch('FedLogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      },
      // ,
      // goBack() {
      //   window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
      // }
    },
    watch: {
      $route(to, from) {
        this.tabName = to.matched[0].path // 从path中获取
        this.tabNameChild = to.path // 从path中获取
      },
    },
  }
</script>

<style scoped>
  .nav-logo {
    height: 80px;
    background: url(/static/agent/img/background_pic01.jpg);

  }
  /*.nav-tab{*/
    /*border:none;*/
  /*}*/
  /*.nav-tab .el-tabs__header {*/
    /*!* background-color: rgb(194, 216, 245);*/
              /*padding: 40px 0 0 0; *!*/
    /*margin: -41px 13% 0 13%;*/
  /*}*/
  /*.nav-tab .el-tabs__item {*/
    /*color: #fff;*/
    /*background-color: #409eff;*/
    /*border-color: #409eff;*/
    /*border-radius: 4px;*/
  /*}*/
  /*.nav-tab .el-tabs__item.is-active {*/
    /*color: #409eff;*/
    /*background: #ecf5ff;*/
    /*border-color: #b3d8ff;*/
    /*border: none;*/
  /*}*/
  /*.nav-tab .el-tabs__nav-wrap {*/
  /*}*/
  /*.nav-tab .el-tabs__nav-scroll {*/
    /*padding: 0;*/
  /*}*/
  /*.nav-bread {*/
    /*height: 35px;*/
    /*background-color: #ecf5ff;*/
  /*}*/
  /*.nav-tab-child .el-tabs__header {*/
    /*!* background-color: #ecf5ff; *!*/
    /*padding: 0;*/
    /*margin: 0;*/
  /*}*/
  /*.nav-tab-child .el-tabs__nav-scroll {*/
    /*!* padding: 0 0 0 100px; *!*/
  /*}*/
  /*.nav-tab-child .el-tabs__item {*/
    /*color: darkslategrey;*/
    /*background-color: #ecf5ff;*/
    /*border-color: #ecf5ff;*/
    /*border-radius: 0px;*/
    /*font-size: 12px;*/
    /*height: 34px;*/
    /*line-height: 34px;*/
  /*}*/
  /*.nav-tab-child .el-tabs__item.is-active {*/
    /*color: red;*/
    /*background-color: white;*/
  /*}*/
  /*.el-tabs__nav{*/
    /*border:none !important;*/
  /*}*/
  /*.el-tab-pane{*/
    /*border:none;*/
  /*}*/
  .nav-title{
    display: block;
    color: #fff;
    font-size: 26px;
    font-weight: bolder;
    text-align: center;
    letter-spacing: 5px;
    height: 60px;
    line-height: 60px;
    width: 160px;
  }
  .nav-content{
    padding-top: 52px;
    border:none;
  }
  .nav-content-button{
    color:#FFF;
    width: 103px;
    height: 28px;
    font-weight: bold;
    font-size: 14px;
    line-height: 28px;
    border:none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color:#1554BE ;
    margin: 0 2px;
  }
  .nav-content-button:hover{
    background-color: #d1dbed;
    color:#1554BE
  }
  .is-selected-button{
    background-color: #d1dbed;
    color:#1554BE
  }
  .nav-info{
    font-size:13px;
    color:#FFF;
    line-height: 18px;
    padding-top: 20px;
  }
  .nav-info_img{
    padding-top: 20px;
  }

  .subCurrPage{
    width:100%;
    display: flex;
    background-color: #d1dbed;
    height:40px;
    line-height: 40px;
    padding: 0 10px;
    font-size:14px;
  }
  .subCurrPage-left{
    font-weight: bold;
  }
  .subCurrPage-left img{
    margin: 0 10px;
    vertical-align: middle;
  }
  .subCurrPage-right button{
    border: 0;
    border-right: 1px solid #1f2d3d;
    background-color: rgba(0, 0, 0, 0);
  }
  .subCurrPage-right button:hover{
    color:#e60012;
    text-decoration: underline;
  }
  .isSelectedBtn{
    color:#e60012
  }
</style>
